import React, { useState, useEffect } from 'react';
import {
  Chart,
  Interval,
  Tooltip,
  Axis,
  Coordinate
} from 'bizcharts';
import { getPie } from './service.ts' 

export default () =>  {

  const [data, setData] = useState(undefined)

  useEffect(async() => {
    const res = await getPie();
    setData(res.data)
  }, [])
  
  // const data = [
  //   { year: '2001', population: 41.8 },
  //   { year: '2002', population: 38 },
  //   { year: '2003', population: 33.7 },
  //   { year: '2004', population: 30.7 },
  //   { year: '2005', population: 25.8 },
  //   { year: '2006', population: 31.7 },
  //   { year: '2007', population: 33 },
  //   { year: '2008', population: 46 },
  //   { year: '2009', population: 38.3 },
  //   { year: '2010', population: 28 },
  //   { year: '2011', population: 42.5 },
  //   { year: '2012', population: 30.3 },
  // ];

  const scale = {
    item: {
      formatter: v => {
        return {
          condimentsScore: '调味料',
          proteinfatScore: '蛋白质与脂肪', 
          fruitvegetablesScore: '蔬菜与水果',
          carbohydrateScore: '碳水化合物',
          alcoholScore: '酒',
        }[v]
      }
    }
  }

  return (
    <Chart scale={scale} height={300} data={data} autoFit>
      <Coordinate type="polar" />
      <Axis visible={false} />
      <Tooltip showTitle={false} />
      <Interval
        position="item*score"
        adjust="stack"
        element-highlight
        color="item"
        style={{
          lineWidth: 1,
          stroke: '#fff',
        }}
        label={['year', {
          offset: -15,
        }]}
      />
    </Chart>
  );
}


